<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="test" data-name="test" class="haha" style="color: red">sfsadfasdfasdfasdf</div>
<pre><code id="show"></code></pre>
</body>
<script>
  window.onload = () => {
    const el = document.getElementById('test')
    const show = document.getElementById('show')
    const attrs = el.getAttributeNames().reduce((acc, cur) => {
      acc[cur] = el.getAttribute(cur)
      return acc
    }, {})
    console.log(attrs)
    show.innerHTML = JSON.stringify(attrs, null, 2)

    const attrs2 =Array.from(el.attributes).reduce((acc, attr) => {
      acc[attr.name] = attr.value
      return acc
    }, {})
    console.log(attrs2)
  }
</script>
</html>
